import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getDetail, getPing,getList } from '../../apis/apis';
import { Input,Button,Avatar,List  } from "antd";
function Detail() {
    const id=useParams().id
    
    const aadd=[id]
    console.log(id)
    const [xq,setXq]=useState('')
    const ww=async()=>{
        const res=await getDetail(id)
        console.log(res.comments)
        setData(res.comments)
        setXq(res)
    }
    


    const [value,setValue]=useState('')
    const onchangePing=async()=>{
        const res=await getPing({
             userId:47529555,// 47529555 用户id
        content:value,//评论内容
      //  commentId:number,//评论ID（非必填，回复评论时使用）
        articleId:id // 文章id 90

        })
        setValue('')
        ww()
    }

    const [data,setData]=useState('')

    useEffect(()=>{
        ww()
    },[])
    
    

    const [huifu,setHuifu]=useState('')
    const [issd,setIssd]=useState({})
    const tot=(commentId)=>{
        setIssd((pre)=>({
            ...pre,
            [commentId]:!pre[commentId]
        }))
    }
    const huie=async(commentId)=>{
        const res=await getPing({
             userId:47529555,// 47529555 用户id
        content:huifu,//评论内容
      commentId,//评论ID（非必填，回复评论时使用）
        articleId:id // 文章id 90

        }) 
        console.log(res);
        tot(commentId)
        setHuifu('')
        ww()
    }
    return (
        <div>
            <h2>话题：{xq.title}</h2>
            <p>
                内容：{xq.content}
            </p>
            <Input.TextArea rows={4} placeholder="请输入内容" value={value} onChange={(e)=>setValue(e.target.value)} />
            <Button onClick={onchangePing}>评论</Button>
             <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={(item, index) => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
          title={item.user.username}
          description={
            <div>
                <div>
                    <p>评论内容：{item.content}</p>
                    <p>评论时间：{item.createdAt}</p>
                </div>
                <Button onClick={()=>tot(item.id)}>{issd[item.id]?'取消回复':'回复'}</Button>
                {item.replies&&item.replies.map((item)=>{
                    return <div>
                        <div>
                            <p>回复用户：{item.user.username} | 回复时间：{item.createdAt} | 回复内容：{item.content}</p>
                            <p></p>
                        </div>
                    </div>
                })}
                {issd[item.id] && <div>
                    <Input.TextArea placeholder="请输入内容" value={huifu} onChange={(e)=>setHuifu(e.target.value)}/>
                    <Button onClick={()=>huie(item.id)}>回复</Button>
                    </div>}
                

            </div>
          }
        />
      </List.Item>
    )}
  />
        </div>
    );
}

export default Detail;